<template>
    <div :class="mImgStyle" @click="showLoading">
        <img class="sImg" :src="IMG_URL">
    </div>

</template>
<script setup lang="ts">
import { PiniaLoading } from '@/pinia/YcPinia';
import { getAssetsFile } from '@/utils/YcAssetUtil';
import { ref } from 'vue';
const IMG_URL = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fa8773912b31bb051dbc358fd3f7adab44bede004.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665732856&t=e93834965da049bd2b6f51204308cd81"
// const IMG_URL = getAssetsFile("test.jpg")
const mImgStyle = ref("sSmall")
const showLoading = () => {
    if (mImgStyle.value === "sSmall") {
        mImgStyle.value = "sBig"
    } else {
        mImgStyle.value = "sSmall"
    }
}
</script>
<style scoped>
.sSmall {
    width: 100%;
    height: 233px;
    background-color: red;
}

.sBig {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vh;
    height: 100vw;
    left: 100vw;
    z-index: 9999;
    background-color: blue;
    transform: rotate(90deg);
    transform-origin: 0% 0% 0;
}

.sImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
</style>